<template>
  <div>
    <div ref="chart" style="width: 100%; height: 140px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState } from 'vuex';

export default {
  name: 'RectangleChart',
  data() {
    return {
      // 数据值
    };
  },
  computed: mapState({
    totalOrders: function (state) {
      return state.data.orderData.totalOrders
    },
    todayOrders: function (state) {
      return state.data.orderData.todayOrders
    },
    recycling: function (state) {
      return state.data.orderData.orderStates.Created+
      state.data.orderData.orderStates.Recycled+
      state.data.orderData.orderStates.Completed+
      state.data.orderData.orderStates.Recycling
    },
    Waiting: function (state) {
      return state.data.orderData.payStates.Waiting+
      state.data.orderData.payStates.Paying 
    },
  }),
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);

      const option = {
        graphic: [
          // 绘制竖线分割
          {
            type: 'line',
            shape: {
              x1: '50%',
              y1: '0%',
              x2: '50%',
              y2: '100%'
            },
            style: {
              stroke: '#839AAC',
              lineWidth: 2
            }
          },
          // 左上角的数据（值在上，name在下）
          {
            type: 'text',
            left: '8%',
            top: '5%',
            style: {
              rich: {
                value: {
                  font: "bold 30px Arial", // 数值字体
                  fill: "#1A4F79", // 数值颜色
                },
                unit: {
                  font: "14px Arial", // 单位字体
                  fill: "#839AAC", // 单位颜色
                  verticalAlign: "bottom",
                },
              },
              text: `{value|${this.totalOrders}}  {unit|${"笔"}}`, // 数值和单位用rich样式显示
            }
          },
          {
            type: 'text',
            left: '8%',
            top: '33%',
            style: {
              text: '累计订单总量',  // 显示名称
              font: '16px Arial',
              fill: '#839AAC'  // 设置名称的颜色
            }
          },
          // 右上角的数据
          {
            type: 'text',
            right: '8%',
            top: '5%',
            style: {
              rich: {
                value: {
                  font: "bold 30px Arial", // 数值字体
                  fill: "#A8AFB9", // 数值颜色
                },
                unit: {
                  font: "14px Arial", // 单位字体
                  fill: "#839AAC", // 单位颜色
                  verticalAlign: "bottom",
                },
              },
              text: `{value|${this.todayOrders}}  {unit|${"笔"}}`, // 数值和单位用rich样式显示
            }
          },
          {
            type: 'text',
            right: '8%',
            top: '33%',
            style: {
              text: '今日订单量',
              font: '16px Arial',
              fill: '#839AAC'  // 设置名称的颜色
            }
          },
          // 左下角的数据
          {
            type: 'text',
            left: '8%',
            bottom: '20%',
            style: {
              rich: {
                value: {
                  font: "bold 30px Arial", // 数值字体
                  fill: "#FBCBC9", // 数值颜色
                },
                unit: {
                  font: "14px Arial", // 单位字体
                  fill: "#839AAC", // 单位颜色
                  verticalAlign: "bottom",
                },
              },
              text: `{value|${this.recycling}}  {unit|${"笔"}}`, // 数值和单位用rich样式显示
            }
          },
          {
            type: 'text',
            left: '8%',
            bottom: '5%',
            style: {
              text: '回收中',
              font: '16px Arial',
              fill: '#839AAC'  // 设置名称的颜色
            }
          },
          // 右下角的数据
          {
            type: 'text',
            right: '8%',
            bottom: '20%',
            style: {
              rich: {
                value: {
                  font: "bold 30px Arial", // 数值字体
                  fill: "#CF8910", // 数值颜色
                },
                unit: {
                  font: "14px Arial", // 单位字体
                  fill: "#839AAC", // 单位颜色
                  verticalAlign: "bottom",
                },
              },
              text: `{value|${this.Waiting}}  {unit|${"笔"}}`, // 数值和单位用rich样式显示
            }
          },
          {
            type: 'text',
            right: '8%',
            bottom: '5%',
            style: {
              text: '待付款订单',
              font: '16px Arial',
              fill: '#839AAC'  // 设置名称的颜色
            }
          }
        ]
      };

      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
/* 如果需要，可以添加自定义的样式 */
</style>
